<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :width="'20%'"
    :height="'20%'"
    @close="handleClose"
    :before-close="handleBeforeClose"
    title="图片预览"
  >
    <el-image
      :src="previewUrl"
      fit="contain"
      :preview-src-list="previewSrcList"
      :index="previewIndex"
      style="max-width: 100%;"
    />
  </el-dialog>
</template>

<script>
export default {
  name: "ImagePreview",
  props: {
    src: {
      type: String,
      default: ""
    },
    visible: {
      type: Boolean,
      default: false
    },
    srcList: {
      type: Array,
      default: () => []
    },
    index: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      previewUrl: this.src, // 当前预览的图片
      previewSrcList: this.srcList, // 图片列表
      previewIndex: this.index // 当前图片索引
    };
  },
  watch: {
    visible(newValue) {
      this.dialogVisible = newValue;
    },
    dialogVisible(newValue) {
      this.$emit("update:visible", newValue);
    }
  },
  methods: {
    handleClose() {
      this.$emit("close");
    },
    handleBeforeClose(done) {
      done();
    }
  }
};
</script>

<style scoped>
.el-image {
  border-radius: 5px;
  background-color: #ebeef5;
  box-shadow: 0 0 5px 1px #ccc;
  ::v-deep .el-image__inner {
    transition: all 0.3s;
    cursor: pointer;
  }
  ::v-deep .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: #909399;
    font-size: 30px;
  }
}
</style>
